Safariはアルファチャンネル付きAnimated WebPを正しくレンダリングできない場合がある
まとめ
一部のアルファチャンネル付きのAnimated WebPをSafariで表示するとバグる
ブレンドが有効で前フレームを破棄しないタイミングがあると発生する模様
安全な形式選択、もしくは正常に表示できる Animated WebP の作成方法は以下を参考のこと 詳細
少なくとも確認時点 macOS Ventura 13.x や iOS 16 に含まれる Safari 16.5 (Webkit) では、一部のアルファチャンネル付きの Animated WebP のレンダリング結果が壊れる事象がある 具体的な現象としては、半透明部分に前のフレームの描画結果が残ったり、再生時間の蓄積で再生速度が低下していく
webpmux を使用して不具合の出る画像を見てみると blend: yes で前フレームの情報を使用して圧縮されており、disposeの指定が none や background とまちまちであることがわかる
WebP 紹介ページに有るサンプルは正常に表示されるが、これはフレームのブレンドが全て無効でフレームを破棄する設定が有効なため code:sh
❯ webpmux -info ./dancing_banana2.lossless.webp
Canvas size: 990 x 1050
Features present: animation transparency
Background color : 0x00FFFFFF Loop Count : 0
Number of frames: 8
No.: width height alpha x_offset y_offset duration dispose blend image_size compression
1: 630 870 yes 240 180 100 background no 466 lossless
2: 750 930 yes 180 120 100 background no 528 lossless
3: 960 1050 yes 30 0 100 background no 762 lossless
4: 810 990 yes 30 60 100 background no 558 lossless
5: 630 870 yes 120 180 100 background no 468 lossless
6: 750 930 yes 60 120 100 background no 532 lossless
7: 960 1050 yes 0 0 100 background no 756 lossless
8: 810 990 yes 150 60 100 background no 554 lossless
解決方法
アルファチャンネルを含む画像として扱う必要がある場合は
すべてのフレームでblend: no なフレーム情報を持つ Animated WebP を作成する 動画として組み込める場合は video タグを使いつつ Safari では アルファチャンネル付き HEVCを使用し、それ以外では WebM を表示すると良い 透過情報付き HEVC の圧縮率はビットレートにもよるが、Animated GIF と比較して 2/3 ほどになるのでファイルサイズは自体は若干削減できる またアルファチャンネルを破棄できるなら、そのほうがより効率よく圧縮できる
関連
